<template>
    <div class="fillContain">
        <head-top></head-top>
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-container>
                <el-main>
                    <el-form :inline="true" ref="form"  size="mini" label-width="">
                        <el-form-item label="报表名称：">
                            <el-input
                                    placeholder="请输入报表名称"
                                    v-model="name"
                                    style="width: 150px"
                                    clearable>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="报表分类：">
                            <el-select v-model="categorySelect.chooseValue" filterable clearable  placeholder="请选择报表分类"
                                       @visible-change="initCategorySelect"
                                       style="width: 150px">
                                <el-option
                                        v-for="item in categorySelect.options"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态：">
                            <el-select v-model="statusSelect.chooseValue" filterable clearable placeholder="请选择状态"
                                       @visible-change="initStatusSelect"
                                       style="width: 100px">
                                <el-option
                                        v-for="item in statusSelect.options"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-button size="mini" type="primary" @click="searchReport()">查询</el-button>
                    </el-form>
                    <el-table
                            ref="reportManageTable"
                            :data="tableData"
                            border
                            size="mini"
                            height="375px"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-steps :space="200" :active="props.row.active" finish-status="success">
                                    <el-step title="等待生成"></el-step>
                                    <el-step title="数据生成"></el-step>
                                    <el-step title="等待上传"></el-step>
                                    <el-step title="文件上传"></el-step>
                                    <el-step title="上传成功" :status="props.row.successStep"></el-step>
                                    <el-step title="上传失败" :status="props.row.errorStep"></el-step>
                                </el-steps>
                            </template>
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="name"
                                label="报表名称">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="categoryName"
                                label="报表分类">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="status"
                                label="状态"
                                :formatter="statusFormatter">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="createTime"
                                label="发布时间">
                        </el-table-column>
                        <el-table-column
                                show-overflow-tooltip
                                prop="updateTime"
                                label="更新时间">
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="counts">
                        </el-pagination>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import HeadTop from '@/views/main-components/HeadTop.vue'
    import {getServiceInterfaceList} from '@/api/getData'
    import {ListSysDict} from '@/api/reportData'
    export default {
        created:  function () {

            this.getUserInfo();
        },
        components: {
            HeadTop
        },
        data() {
            return {
                name: '',
                categorySelect: {
                    chooseValue: '',
                    options: []
                },
                statusSelect: {
                    chooseValue: '',
                    options: []
                },
                tableData: [],
                counts: 0,
                currentPage: 1,
                pageSize: 20,
                myMap :new Map(),
            };
        },
        methods: {

            /**
             *测试用户权限
             */
            async getUserInfo(){
                console.log(this.$route.query.userId);
                let userId=this.$route.query.userId;
                let channel='reportStep';
                if (userId==null){
                    userId="1";
                }
                let userinfo= await this.getUser(userId,channel);
                if (true){
                    var all = {
                        name: "全部",
                        value: ''
                    }
                    this.searchReport();
                    this.getDictByCodeAndVal();
                    var arry = new Array();
                    arry.push(all);
                    this.statusSelect.options = arry;
                    this.categorySelect.options = arry;
                    await this.initCategorySelect(true);
                    await this.initStatusSelect(true);
                }else{
                    this.$router.push({path: '/404',params:{ id:'1'}});
                }
            },
            async initCategorySelect(bool){
                if(bool) {
                    var all = {
                        name: "全部",
                        value: ''
                    }
                    //初始化 sqlCode
                    var categorySelect = await this.getSysSql('REPORT_CATEGORY_NAME');
                    categorySelect.unshift(all);
                    this.categorySelect.options = categorySelect;
                }
            },
            async initStatusSelect(bool) {
                if (bool) {
                    var all = {
                        name: "全部",
                        value: ''
                    }
                    //初始化 状态下拉框
                    var result = await this.getSysDictItem('SERVICE_INTERFACE_STATUS');
                    result.unshift(all);
                    this.statusSelect.options = result;
                }
            },
            initTable(id) {
                //alert(id);
            },
            /**
             * 获取字典信息
             */
            async getDictByCodeAndVal(){
                var params2 = {
                    type:'dict',
                    dictCode: "SERVICE_INTERFACE_STATUS"
                };
                let dictSQL =await ListSysDict(params2);
                console.log(dictSQL);
                dictSQL.forEach(dict=>{
                    this.myMap.set(dict.VALUE,dict.NAME);
                })
            },
            //监听页面变化
            handleSizeChange(val) {
                this.pageSize = val;
                this.searchReport();
            },
            //监听页面选择变化
            handleCurrentChange(val) {
                this.currentPage = val;
                this.searchReport();
            },
            //查询报表配置
            async searchReport() {
                const loading = this.$loading({
                    lock: true,
                    text: '加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                var params = {
                    current: this.currentPage,
                    size: this.pageSize,
                    name: this.name,
                    status: this.statusSelect.chooseValue,
                    categoryId: this.categorySelect.chooseValue
                }
                let reply = await getServiceInterfaceList(params);

                loading.close();
                if (reply.code == 500) {
                    this.$notify.error({
                        title: '错误',
                        message: reply.msg
                    });
                } else {
                    this.counts = reply.data.total;
                    this.currentPage = reply.data.pageNum;
                    var list = reply.data.list;
                    for (var i = 0; i < list.length; i ++) {
                        var status = list[i].status;
                        switch (status) {
                            case "00W":
                                list[i].active = 0;
                                break;
                            case "00D":
                                list[i].active = 1;
                                break;
                            case "00E":
                                list[i].active = 2;
                                break;
                            case "00F":
                                list[i].active = 3;
                                break;
                            case "00A":
                                list[i].errorStep = "wait";
                                list[i].active = 5;
                                break;
                            case "00X":
                                list[i].successStep = "error";
                                list[i].errorStep = "error";
                                list[i].active = 6;
                                break;
                        }
                    }
                    this.tableData = list;
                }
            },
            //table字段转换
            statusFormatter: function(row, column) {
                return this.myMap.get(row.status)
            }
        }
    }
</script>

<style scoped>
</style>